<!--新建文件夹、仪表板-->
<template>
    <el-card class="panel-index wly-page">
        <div style="display: flex;position: relative;height: 100%">
            <div style="flex: 1;width: 0">
                <TemplateIndex :boardId="curBoardId" :name="curBoardName" :is-edit="true"></TemplateIndex>
            </div>
        </div>
        <rename-dialog ref="renameDialog" @saved="qryMenuData()"></rename-dialog>
    </el-card>
</template>

<script>
    import { QUERY_DASH_BORARD } from '@api/url'
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import ajax from '../../api/ajax'
import VHeader from '../../components/VHeader/VHeader'
import FileBreadcrumb from './scopeedcomponents/FileBreadcrumb'
import RenameDialog from './scopeedcomponents/RenameDialog'
import TemplateIndex from './templateConfig/TemplateIndex'

    export default {
        name: 'PanelEdit',
        components: {
            VHeader,
            RenameDialog,
            FileBreadcrumb,
            TemplateIndex,
            VueDraggableResizable
        },
        watch: {
            searchPanel(val) {
                this.$refs.tree.filter(val);
            },
        },
        data() {
            return {
                searchPanel: null,
                height: window.innerHeight - 230,
                treeFileName: [],
                menuData: [],
                currentRow: {
                    menuId: '0',
                    type: '6',
                    parentId: '0'
                }, // 当前目录的父级ID
                searchFlag: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                aside: {
                    x: 0,
                    y: 0,
                    w: 250,
                    h: 600
                },
                asideExpend: true,
                curBoardId:null,
                curBoardName:'',
            }
        },
        methods: {
            /**
             * 查询仪表盘信息
             * @param val
             */
            qryMenuData(val) {
                this.currentRow = val
                const param = {type: '6'}
                if(val){
                    param.menuId = val.menuId||'0'
                }else{
                    param.parentId = '0'
                    this.curBoardName = '全部'
                }
                ajax.post(QUERY_DASH_BORARD, param).then(res => {
                    this.menuData = res.data
                })
            },

        },
        created() {
            this.searchFlag = false
            // this.qryMenuData()
        },
        mounted() {
            const {boardId,name} = this.$route.query;
            this.curBoardId = boardId
            this.curBoardName = name
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .panel-index /deep/{
        height 100%
        .el-card__body{
            height 100% !important
        }
        .v-header{
            margin-bottom 0 !important
            p{
                margin 0 !important
            }
        }
    }

    .aside-bar {
        background white
    }

    .aside {
        position relative
        z-index 1000

        &.hideChild {
            overflow-x hidden
            z-index 10000
        }

        &:hover {
            .expend {
                display block
            }
        }

        .expend {
            display none
            position absolute
            top 0
            right 0
            transform translateX(50%)
            background white
            width 20px
            height 20px
            border-radius 50%
            border 1px solid
            text-align center
            line-height 20px
            cursor pointer
            transition all 0.3s

            &.el-icon-d-arrow-right {
                display block
                transform translateX(0)
            }

        }

        .aside-box {
            display flex
            flex-direction column
            margin 0 10px 0 0

            .tree-box {
                margin-top 10px
                flex-grow 1
                flex-basis 465px
                overflow-y auto

                &::-webkit-scrollbar {
                    width: 5px;
                    height: 5px;
                }

                &::-webkit-scrollbar-track {
                    width: 6px;
                    background: rgba(#101F1C, 0.1);
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: rgba(144, 147, 153, .5);
                    background-clip: padding-box;
                    min-height: 28px;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                    transition: background-color .3s;
                    cursor: pointer;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background-color: rgba(144, 147, 153, .3);
                }
                .my-tree-node{
                    width 100%
                    display flex
                    justify-content space-between
                    align-items center
                    .my-tree-node-action{
                        display none
                        padding 0 10px
                    }
                    &:hover{
                        .my-tree-node-action{
                            display block
                            .el-icon-more{
                                transform rotate(90deg)
                            }
                        }
                    }
                }
            }
        }

    }

    .my-class /deep/, .my-active-class /deep/ {
        border none
        /*border-right: 1px solid #ccc;*/

        .my-handle-class {
            display none !important
        }

        .my-handle-class-mr {
            width 20px !important
            height 20px !important
            top: 50% !important;
            margin-top: -7px !important;
            right: 0 !important;
            cursor: e-resize !important;
            position: absolute;
            background-image: url('~@asst/image/dotted.png');
            background-size: 100% 100%;
            z-index: 1000;
            transform: translateX(50%);
            display block !important
        }
    }

    .panel-index
        .u-btn
            display none

        .table-head
            display inline-block
            width 100%
            padding 8px 16px
            background-color #F5F7FA
            border 1px solid #c0c4cc
            margin-bottom 10px

        .el-table tr:hover
            .u-btn
                display inline


</style>
